<template>
  <div>
     <div style="width: 50px; height: 50px" ref="chart"></div>
  </div>
</template>

<script>
const Echarts = require('echarts/lib/echarts') // 基础实例 注意不要使用import
require('echarts/lib/chart/bar') // 按需引入 bar = 柱状图
export default {
  data () { return { chart: null } }, // 图表实例
  mounted () { this.init() },
  methods: {
    init () {
      // 2.初始化
      this.chart = Echarts.init(this.$refs.chart)
      // 3.配置数据
      const option = {
        series: [
          {
            gradientColor: ['red'],
            color: ['white'],
            type: 'pie',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            data: [
              { value: 1548 }
            ]
          },
          {
            type: 'pie',
            radius: ['45%', '80%'],
            labelLine: {
              length: 30

            },
            label: {
              position: 'inner',
              fontSize: 14
            },
            data: [
              { value: 150, itemStyle: { color: '#87CEFA' } },
              { value: 520, itemStyle: { color: '#ccc' } }

            ]
          }
        ]
      }
      // 4.传入数据
      this.chart.setOption(option)
    }
  }
}
</script>

<style>

</style>
